<template>
  <el-container direction="vertical" style="padding: 10px; ">
    <el-form :inline="true"  size="mini">
      <el-form-item label="文件名">
        <el-input v-model="searchForm.fileName"></el-input>
      </el-form-item>
      <el-form-item label="标签名">
        <el-input v-model="searchForm.tagName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-container id="file-list-container" style="display: flex; flex-wrap: wrap;">
      <file-item v-for="file in dataList" :file-info="file"></file-item>
    </el-container>
    <el-pagination
      style="padding: 10px 10px 5px 10px; margin: 0 auto"
      :current-page="searchForm.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="searchForm.size"
      layout="total, prev, pager, next, jumper"
      :total="total"
    />
  </el-container>
</template>

<script>
  import FileItem from '../../../components/File/FileItem'
  export default {
    name: 'index',
    components: { FileItem },
    data: function() {
      return {
        dataList: [],
        searchForm:{
          fileName: null,
          tagName: null,
          current: 1,
          size: 15,
        },
        total: 0,
      }
    },
    created() {
      this.search()
    },
    methods: {
      search() {
        this.$api.filePage(this.searchForm).then(res => {
          this.dataList = res.records;
          this.searchForm.current = res.current;
          this.total = res.total;
        })
      },
      handleSizeChange(val) {
        this.searchForm.size = val;
        this.search();
      },
      handleCurrentChange(val) {
        this.searchForm.current = val;
        this.search();
      }
    }
  }
</script>

<style scoped>

</style>
